<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<title>EXTRAS - Google Search Appliance XHTML Stylesheet</title>
<style type="text/css">
/* <![CDATA[ */
body { color: #000; background: #fff; }
table { border-collapse: collapse; }
th,td { border: 1px solid black; padding: 4px; color: black; background: #c9c9c9; }
th.rh { text-align: left; }
/* ]]> */
</style>
</head>
<body>

<h1>EXTRAS</h1>

<h2>Contents</h2>

<ul>
  <li><a href="#screenshots">Browser Screen Shots</a></li>
  <li><a href="#examples">Example Pages (XHTML)</a></li>
  <li><a href="#style">Style (CSS)</a></li>
</ul>

<p>Return to the <a href="README.html">README</a>.</p>

<hr />

<h3 id="screenshots">Browser Screen Shots</h3>

<ul>
  <li>Illustrates typical search examples</li>
</ul>

<table>
<tr><th colspan="2" rowspan="2">&#160;</th><th>Screen</th><th>Print</th><th>No Style</th><th>No Style</th><th>Handheld</th></tr>
<tr><th colspan="3">Firefox</th><th>Lynx</th><th>Opera Mini</th></tr>
<tr>
  <th class="rh" colspan="2">Search Home</th>
  <td><a href="screenshots/screen/home.png">View</a></td>
  <td><a href="screenshots/print/home.png">View</a></td>
  <td><a href="screenshots/nostyle/home.png">View</a></td>
  <td><a href="screenshots/lynx/home.png">View</a></td>
  <td><a href="screenshots/handheld/home.png">View</a></td>
</tr>
<tr>
  <th class="rh" rowspan="2">Search Results</th><th>Start</th>
  <td><a href="screenshots/screen/search.png">View</a></td>
  <td><a href="screenshots/print/search.png">View</a></td>
  <td><a href="screenshots/nostyle/search.png">View</a></td>
  <td><a href="screenshots/lynx/search.png">View</a></td>
  <td><a href="screenshots/handheld/search.png">View</a></td>
</tr>
<tr>
  <th>End</th>
  <td><a href="screenshots/screen/search-end.png">View</a></td>
  <td><a href="screenshots/print/search-end.png">View</a></td>
  <td><a href="screenshots/nostyle/search-end.png">View</a></td>
  <td><a href="screenshots/lynx/search-end.png">View</a></td>
  <td><a href="screenshots/handheld/search-end.png">View</a></td>
</tr>
<tr>
  <th class="rh" colspan="2">No Results</th>
  <td><a href="screenshots/screen/noresults.png">View</a></td>
  <td><a href="screenshots/print/noresults.png">View</a></td>
  <td><a href="screenshots/nostyle/noresults.png">View</a></td>
  <td><a href="screenshots/lynx/noresults.png">View</a></td>
  <td><a href="screenshots/handheld/noresults.png">View</a></td>
</tr>
<tr>
  <th class="rh" colspan="2">Advanced Search</th>
  <td><a href="screenshots/screen/advanced.png">View</a></td>
  <td><a href="screenshots/print/advanced.png">View</a></td>
  <td><a href="screenshots/nostyle/advanced.png">View</a></td>
  <td><a href="screenshots/lynx/advanced.png">View</a></td>
  <td>n/a</td>
</tr>
</table>

<h4>Notes</h4>

<ul>
  <li>Advanced Search not supported for Handheld Media</li>
</ul>

<hr />

<h3 id="examples">Example Pages (XHTML)</h3>

<ul>
  <li>Condensed, semantically meaningful, well-formed and valid XHTML</li>
  <li>Pages are readable and accessible even with style disabled</li>
  <li>Handheld-exclusive mode minimizes markup even further</li>
</ul>

<table>
<tr><th>&#160;</th><th>Original</th><th>XHTML</th><th>Reduction</th></tr>
<tr>
  <th class="rh">Search Home</th>
  <td><a href="examples/home-original.html">3.9 KB</a></td>
  <td><a href="examples/home-tidy.html">2.8 KB</a></td>
  <td>28%</td>
</tr>
<tr>
  <th class="rh">Search Results</th>
  <td><a href="examples/search-original.html">21.8 KB</a></td>
  <td><a href="examples/search-tidy.html">14.8 KB</a></td>
  <td>32%</td>
</tr>
<tr>
  <th class="rh">No Results</th>
  <td><a href="examples/noresults-original.html">5.3 KB</a></td>
  <td><a href="examples/noresults-tidy.html">3.5 KB</a></td>
  <td>34%</td>
</tr>
<tr>
  <th class="rh">Advanced Search</th>
  <td><a href="examples/advanced-original.html">16.0 KB</a></td>
  <td><a href="examples/advanced-tidy.html">6.0 KB</a></td>
  <td>62%</td>
</tr>
</table>

<h4>Notes</h4>

<ul>
  <li>Original sizes based on GSA Version 4.6.2.S.22 without embedded CSS</li>
  <li>XHTML examples are reformatted for ease of reading. Actual markup is condensed.</li>
</ul>

<hr />

<h3 id="style">Style (CSS)</h3>

<ul>
  <li>Condensed, Valid CSS 2.1</li>
  <li>Screen, Print and Handheld Media support</li>
  <li>Embedded Search Results style is minimized depending on presentation</li>
  <li>Style can be optionally linked vs. embedded (via XSLT configuration)</li>
</ul>

<table>
  <tr><th>&#160;</th><th>Media</th><th>Size</th><th title="Size when using Internet Explorer.">Size (IE)</th><th>Files</th></tr>
  <tr>
    <th class="rh">Original<br />Search &amp; Advanced</th>
    <td>All</td>
    <td>0.8 KB</td>
    <td>0.8 KB</td>
    <td>&#160;</td>
  </tr>
  <tr>
    <th class="rh" rowspan="2">New Search</th>
    <td>Screen, Print</td>
    <td>4.5 KB</td>
    <td>4.9 KB</td>
    <td>
      <a href="style/annotated/search.css" title="Screen, Print Media">search.css</a><br />
      <a href="style/annotated/search-print.css" title="Print Media">search-print.css</a><br />
      <a href="style/annotated/search-ie.css" title="Screen, Print Media - Internet Explorer 6/7b3">search-ie.css</a><br />
      <a href="style/annotated/search-print-ie.css" title="Print Media - Internet Explorer 6/7b3">search-print-ie.css</a><br />
      <a href="style/annotated/search-ie7.css" title="Screen, Print Media - Internet Explorer 7b3">search-ie7.css</a>
    </td>
  </tr>
  <tr>
    <td>Handheld</td>
    <td>1.2 KB</td>
    <td>1.2 KB</td>
    <td>
      <a href="style/annotated/search-handheld.css" title="Handheld Media">search-handheld.css</a>
    </td>
  </tr>
  <tr>
    <th class="rh">New Advanced</th>
    <td>Screen, Print</td>
    <td>1.2 KB</td>
    <td>1.4 KB</td>
    <td>
      <a href="style/annotated/advanced.css" title="Screen, Print Media">advanced.css</a><br />
      <a href="style/annotated/advanced-print.css" title="Print Media">advanced-print.css</a><br />
      <a href="style/annotated/advanced-print-ie.css" title="Print Media - Internet Explorer">advanced-print-ie.css</a>
    </td>
  </tr>
</table>

<h4>Notes</h4>

<ul>
  <li>Original style was mostly presentation-based markup vs. CSS</li>
  <li>CSS is reformatted for ease of reading. Actual CSS is condensed.</li>
  <li>View the CSS <a href="style/annotated/README.txt">annotations</a>.</li>
</ul>

</body>
</html>
